<template>
  <Card
    title="职位信息"
  >
    <!-- modal -->
    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="assignUserModel.title"
      :visible="assignUserModel.visible"
      v-bind="modalProps"
      :confirm-loading="assignUserModel.confirmLoading"
      width="50%"
      @ok="modalSubmit(assignUserModel)"
      @cancel="modalCancel(assignUserModel)"
    >
      <AssignUser :ref="assignUserModel.ref" @update="updateUser" />
    </a-modal>

    <div class="alert-table-info-container">
      <a-alert show-icon>
        <template slot="message">
          <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{{ selectedRowKeys.length }}</a></span>
          <a @click="selectChangeReset">清空</a>
        </template>
      </a-alert>
    </div>

    <div class="actions-container">
      <a-button type="primary" @click="assignUserModel.visible = true">
        分配人员
      </a-button>
      <a-button class="delete-button" @click="handlerDeleteUsers">
        批量删除
      </a-button>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      v-bind="tableProps"
      row-key="id"
    />
  </Card>
</template>

<script>
import AssignUser from './modal/AssignUser'
import { deleteGroupUsers, getGroupUsers } from '@/api/flow/group'
import { Card } from '@/components'
import table from '@/utils/mixins/table'
import props from '../props'
import modal from './modal'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '账号',
    dataIndex: 'username',
  },
  {
    title: '职位',
    dataIndex: 'position_name',
  },
  {
    title: '部门',
    dataIndex: 'department_name',
  },
  // {
  //   title: '角色',
  //   dataIndex: 'role',
  // },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
]

export default {
  mixins: [table, props, modal],

  components: {
    Card,
    AssignUser,
  },

  data () {
    return {
      columns,
      selectedRowKeys: [], // Check here to configure the default column
    }
  },

  computed: {
    hasSelected () {
      // getGroupUsers()
      return this.selectedRowKeys.length > 0
    },

    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, { gid: this.gid }]
    },
  },

  created () {
    this.tableHooksRequest()
  },

  methods: {
    handlerDeleteUsers () {
      this.deleteGroupUsers()
        .then(() => {
          this.updateUser()
        })
    },

    deleteGroupUsers () {
       const uids = this.selectedRowKeys

      return new Promise((resolve, reject) => {
        if (uids.length <= 0) {
          resolve(uids)
          return false
        }

        deleteGroupUsers(this.gid, { uid: uids })
          .then(data => {
            this.selectChangeReset()
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },

    // SelectChange
    selectChangeReset () {
      this.$nextTick(() => {
        this.selectedRowKeys = []
      })
    },

    updateUser () {
      this.updatePaginationParams({
        page: 1,
      })

      this.tableHooksRequest()
    },

    async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getGroupUsers, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },

    getGroup () {
      return new Promise((resolve, reject) => {
        getGroup(this.gid)
          .then(data => {
            resolve(data)
          })
          .catch(error => {
            resolve(error)
          })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.actions-container {
  margin-bottom: $margin-sm;
  .delete-button {
    margin-left: $margin-sm;
  }
}
</style>
